<template>
    <div v-loading="loading">
        <div class="channel-detail">
            <div class="detail-left">
                <h3 class="title">频道内容设置</h3>
                <el-form
                    :model="detail"
                    :rules="rules"
                    ref="detail"
                    :hide-required-asterisk="true"
                    label-width="100px"
                    class="left-form input-no-border-box">
                    <el-form-item label="展示样式" prop="name">
                        <el-select
                            :disabled="detail.pageid > 0"
                            v-model="detail.displayType"
                            @change="displayTypeChange"
                            placeholder="请选择">
                            <el-option
                                v-for="item in channelList"
                                :key="item.type"
                                :disabled="item.disabled"
                                :label="item.name + item.type"
                                :value="item.type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题" prop="name" v-if="detail.displayType !== 1000 && detail.displayType !== 10200 && detail.displayType !== 10300">
                        <el-input v-model="detail.label" placeholder="非必填"></el-input>
                    </el-form-item>
                    <el-form-item label="频道栏目" prop="name">
                        <el-input v-model="detail.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="首页展示数" prop="name" v-if="detail.displayType === 7000 || detail.displayType === 5000">
                        <el-input v-model="detail.limit"></el-input>
                    </el-form-item>
                    <el-form-item label="投放时间" prop="_timers" v-if="detail.displayType !== 9000">
                        <el-date-picker
                        v-model="detail._timers"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="投放状态" style="margin-bottom: 5px;">
                        <el-radio-group v-model="detail.status">
                            <el-radio :label="1">上线</el-radio>
                            <el-radio :label="2">暂停</el-radio>
                            <el-radio :label="0">测试</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div v-if="detail.displayType === 1000 || detail.displayType === 3000 || detail.displayType === 2100 || detail.displayType === 2000 || detail.displayType === 4100 || detail.displayType === 4000 || detail.displayType === 5000">
                        <h4 style="margin-left:30px;margin-bottom:10px;">选择数据：</h4>
                        <el-form-item label="专题内容" v-if="detail.displayType !== 5000" style="margin-bottom: 5px;">
                            <el-radio-group v-model="detail._routerType" @change="_routerTypeChagne">
                                <el-radio :label="0">游戏信息</el-radio>
                                <el-radio :label="1">自定义</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <template v-if="detail.displayType === 4100 || detail.displayType === 3000 || detail.displayType === 5000">
                            <el-form-item label="右侧内容" style="margin-bottom: 5px;">
                                <el-radio-group v-model="detail.showButton" @change="showButtonChange">
                                    <el-radio :label="1">安装</el-radio>
                                    <el-radio :label="0">评分</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="左侧内容" style="margin-bottom: 5px;">
                                <el-radio-group v-model="detail._leftType" @change="_leftTypeChagne">
                                    <el-radio :label="1">标题</el-radio>
                                    <el-radio :label="2">类型</el-radio>
                                    <el-radio :label="3" v-if="detail.showButton === 1">评分</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </template>

                        <template v-if="detail.displayType === 4100 || detail.displayType === 3000 || detail.displayType === 2000 || detail.displayType === 2100 || detail.displayType === 4000">
                            <el-form-item label="banner类型" v-if="detail._routerType === 0" style="margin-bottom: 5px;">
                                <el-radio-group v-model="detail._contentType" @change="_contentTypeChange">
                                    <el-radio :label="1">图片</el-radio>
                                    <el-radio :label="2">视频</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </template>
                    </div>
                </el-form>

                <!-- 循环 拖拽 -->
                <template v-if="detail.displayType === 4100 || detail.displayType === 7000 || detail.displayType === 5000 || detail.displayType === 4000">
                    <!-- 循环拖拽 -->
                    <div
                        v-for="(item, index) in detail.elements"
                        v-dragging="{ item: item, list: detail.elements}"
                        :key="index">
                        <el-form
                            :model="item"
                            :rules="itemRules"
                            :ref="'item' + index"
                            :hide-required-asterisk="true"
                            class="input-no-border-box"
                            label-width="0px">
                            <el-card shadow="hover" class="drag-items-box">
                                <div class="for-btn-box">
                                    <div class="left-btn">
                                        <!-- 单个关联游戏 -->
                                        <template v-if="detail.displayType === 4100 || detail.displayType === 7000 || detail.displayType === 5000">
                                            <el-button size="small" type="warning" @click="checkGame('one', item)">{{item.gameid ? '更换' : '关联'}}游戏</el-button>
                                        </template>

                                        <!-- 单个关联专题 -->
                                        <template v-if="detail.displayType === 4100 && detail._routerType === 1">
                                            <el-button size="small" type="primary" @click="checkProject ('one', item, index)">{{item.topicid ? '更换' : '关联'}}专题</el-button>
                                            <span v-if="item.topicid" class="project-content">已关联：<span class="go-detail-btn" @click="goProjectDetail(item.topicid)">{{item.topicTitle || ('专题id：' + item.topicid)}}</span></span>
                                        </template>

                                        <!-- 专题游戏组合拳 -->
                                        <template v-if="detail.displayType === 4000">
                                            <template v-if="detail._routerType === 1">
                                                <el-button size="small" type="primary" @click="checkProject ('one', item, index)">{{item.topicid ? '更换' : '关联'}}专题</el-button>
                                                <span v-if="item.topicid" class="project-content">已关联：<span class="go-detail-btn" @click="goProjectDetail(item.topicid)">{{item.topicTitle || ('专题id：' + item.topicid)}}</span></span>
                                            </template>
                                            <template v-else>
                                                <el-button size="small" type="warning" @click="checkGame('one', item)">{{item.gameid ? '更换' : '关联'}}游戏</el-button>
                                            </template>
                                        </template>
                                    </div>
                                    <div class="right-btn">
                                        <!-- <template v-if="detail.displayType === 4100 || detail.displayType === 7000 || detail.displayType === 5000">
                                            <div @click="checkGame('some')">添加游戏</div>
                                        </template>

                                        <template v-if="detail.displayType === 4100 && detail._routerType === 1">
                                            <div @click="checkProject('some')">添加专题</div>
                                        </template>

                                        <template v-if="detail.displayType === 4000">
                                            <template v-if="detail._routerType === 1">
                                                <div @click="checkProject('some')">添加专题</div>
                                            </template>
                                            <template v-else>
                                                <div @click="checkGame('some')">添加游戏</div>
                                            </template>
                                        </template> -->
                                        <div class="del-btn" @click="delCard(item, index)">删除</div>
                                    </div>
                                </div>

                                <div class="for-from-box">
                                    <div>
                                        <template v-if="!(detail.displayType === 4000 && detail._routerType === 1)">
                                            <b class="for-item-title">游戏名称</b>
                                            <span class="for-item-content" style="margin-right:10px">
                                                <span class="go-detail-btn" @click="goGameDetail(item.gameid)">{{item.appName || item.gameid}}</span>
                                            </span>
                                        </template>

                                        <template v-if="(detail.displayType === 4100 || detail.displayType === 5000)">
                                            <template v-if="detail._leftType === 1">
                                                <b class="for-item-title">游戏副标题</b>
                                                <span class="for-item-content" style="margin-right:10px">{{item.appTitle}}</span>
                                            </template>
                                            <template v-else-if="detail._leftType === 2">
                                                <b class="for-item-title">类型</b>
                                                <span class="for-item-content" style="margin-right:10px">{{item.appCategoryName}}</span>
                                            </template>
                                            <template v-if="detail._leftType === 3 || detail.showButton === 0">
                                                <b class="for-item-title">评分</b>
                                                <span class="for-item-content" style="margin-right:10px">{{item.appScore}}</span>
                                            </template>
                                        </template>

                                        <template v-if="detail.displayType === 7000">
                                            <b class="for-item-title">评分</b>
                                            <span class="for-item-content">{{item.appScore}}</span>
                                        </template>
                                    </div>
                                </div>

                                <div class="for-from-box">
                                    <template v-if="detail.displayType !== 4000">
                                        <b class="for-item-title">图标</b>
                                        <div class="item-icon" style="margin-right: 10px">
                                            <img :src="item.appIcon" alt="">
                                        </div>
                                    </template>

                                    <template v-if="detail.displayType === 4100 || detail.displayType === 4000">
                                        <template v-if="detail._contentType === 2">
                                            <span class="for-item-title">视频</span>
                                            <el-form-item prop="url">
                                                <videoBox :url="item.url" :time="item.duration" :img="item.cover"/>
                                                <div class="check-video-btn"><span @click="checkVideo(item)">选择视频</span></div>
                                            </el-form-item>
                                        </template>
                                        <template v-else>
                                            <b class="for-item-title">banner</b>
                                            <el-form-item prop="url">
                                                <uploadCutOwnImg v-model="item.url" :width="1080" :height="528"/>
                                                <div class="check-video-btn" style="width:216px;"><span @click="checkBanner(item)">选择banner</span></div>
                                            </el-form-item>
                                        </template>
                                    </template>
                                </div>

                                <div class="for-from-box" v-if="detail.displayType === 4000">
                                    <b class="for-item-title">介绍语</b>
                                    <el-form-item prop="name" style="flex:1">
                                        <el-input v-model="item.content" placeholder="请输入标题"></el-input>
                                    </el-form-item>
                                </div>
                            </el-card>
                        </el-form>
                    </div>

                    <!-- 关联所有 -->
                    <div style="margin-bottom: 20px;margin-left:10px;">
                        <!-- 单个关联游戏 -->
                        <template v-if="detail.displayType === 4100 || detail.displayType === 7000 || detail.displayType === 5000">
                            <el-button size="small" type="warning" @click="checkGame('some')">添加游戏</el-button>
                            <el-button size="small" type="warning" @click="checkGame('all')">替换{{detail.elements.length}}条游戏</el-button>
                        </template>

                        <!-- 专题游戏组合拳 -->
                        <template v-if="detail.displayType === 4000">
                            <template v-if="detail._routerType === 1">
                                <el-button size="small" type="primary" @click="checkProject('some')">添加专题</el-button>
                                <el-button size="small" type="primary" @click="checkProject('all')">替换{{detail.elements.length}}条专题</el-button>
                            </template>
                            <template v-else>
                                <el-button size="small" type="warning" @click="checkGame('some')">添加游戏</el-button>
                                <el-button size="small" type="warning" @click="checkGame('all')">替换{{detail.elements.length}}条游戏</el-button>
                            </template>
                        </template>
                    </div>
                </template>

                <template v-else-if="detail.displayType === 10000 || detail.displayType === 10200">
                    <!-- 循环拖拽 -->
                    <div
                        v-for="(item, index) in detail.gameList"
                        v-dragging="{ item: item, list: detail.gameList}"
                        :key="index">
                        <el-form
                            :model="item"
                            :rules="itemRules"
                            :ref="'item' + index"
                            :hide-required-asterisk="true"
                            class="input-no-border-box"
                            label-width="0px">
                            <el-card shadow="hover" class="drag-items-box">
                                <div class="for-btn-box">
                                    <div class="left-btn">
                                        <!-- 单个关联游戏 -->
                                        <el-button size="small" type="warning" @click="checkGameCard('one', item)">{{item.listId ? '更换' : '关联'}}游戏单</el-button>
                                    </div>
                                    <div class="right-btn">
                                        <div class="del-btn" @click="delGameListCard(item, index)">删除</div>
                                    </div>
                                </div>

                                <div class="for-from-box">
                                    <div>
                                        <b class="for-item-title">标题</b>
                                        <span class="for-item-content" style="margin-right:10px">
                                            <span>{{item.title}}</span>
                                        </span>
                                    </div>
                                </div>

                                <div class="for-from-box">
                                    <b class="for-item-title">封面</b>
                                    <img :src="item.cover" alt="" style="width:200px;">
                                </div>
                            </el-card>
                        </el-form>
                    </div>

                    <!-- 添加游戏单 -->
                    <div style="margin-bottom: 20px;margin-left:10px;">
                        <el-button size="small" type="warning" @click="checkGameCard('some')">添加游戏单</el-button>
                        <el-button size="small" type="warning" @click="checkGameCard('all')">替换{{detail.gameList.length}}个游戏单</el-button>
                    </div>
                </template>

                <!-- 单个 -->
                <template  v-else-if="detail.displayType === 10100 || detail.displayType === 10300">
                    <el-form
                        v-for="(item, index) in detail.gameList"
                        :key="index"
                        :model="item"
                        :rules="itemRules"
                        :ref="'item' + index"
                        :hide-required-asterisk="true"
                        class="input-no-border-box"
                        label-width="100px">
                        <template>
                            <el-form-item label="关联游戏单" prop="name">
                                <el-button size="small" type="warning" @click="checkGameCard ('one', item)">{{item.listId ? '更换' : '关联'}}游戏单</el-button>
                            </el-form-item>

                            <el-form-item label="封面" prop="appIcon">
                                <img :src="item.cover" alt="" style="width:200px">
                            </el-form-item>

                            <el-form-item label="标题" prop="name">
                                <span>{{item.title}}</span>
                            </el-form-item>
                        </template>
                    </el-form>
                </template>

                <template v-else>
                    <el-form
                        v-for="(item, index) in detail.elements"
                        :key="index"
                        :model="item"
                        :rules="itemRules"
                        :ref="'item' + index"
                        :hide-required-asterisk="true"
                        class="input-no-border-box"
                        label-width="100px">

                        <template v-if="detail.displayType === 1000">
                            <el-form-item label="关联游戏" prop="name">
                                <el-button size="small" type="warning" @click="checkGame('one', item)">{{item.gameid ? '更换' : '关联'}}游戏</el-button>
                                <span v-if="item.gameid" class="project-content">已关联：<span class="go-detail-btn" @click="goGameDetail(item.gameid)"><span class="go-detail-btn" @click="goGameDetail(item.gameid)">{{item.appName || item.gameid}}</span></span></span>
                            </el-form-item>
                            <el-form-item label="关联专题" prop="name" v-if="detail._routerType === 1">
                                <el-button size="small" type="primary" @click="checkProject ('one', item, index)">{{item.topicid ? '更换' : '关联'}}专题</el-button>
                                <span v-if="item.topicid" class="project-content">已关联：<span class="go-detail-btn" @click="goProjectDetail(item.topicid)">{{item.topicTitle || ('专题id：' + item.topicid)}}</span></span>
                            </el-form-item>
                            <el-form-item label="图标" prop="appIcon">
                                <div class="item-icon">
                                    <img :src="item.appIcon" alt="">
                                </div>
                            </el-form-item>
                            <el-form-item label="banner" prop="url">
                                <uploadCutOwnImg v-model="item.url" :width="1080" :height="1440"/>
                                <div class="check-video-btn" style="width:216px;"><span @click="checkBanner(item)">选择banner</span></div>
                            </el-form-item>
                            <el-form-item label="标题" prop="name">
                                <!-- <el-input v-model="item.appTitle"></el-input> -->
                                <span>{{item.appTitle}}</span>
                            </el-form-item>
                        </template>

                        <template v-if="detail.displayType === 2000 || detail.displayType === 2100">
                            <el-form-item label="关联专题" prop="name" v-if="detail._routerType === 1">
                                <el-button size="small" type="primary" @click="checkProject ('one', item, index)">{{item.topicid ? '更换' : '关联'}}专题</el-button>
                                <span v-if="item.topicid" class="project-content">已关联：<span class="go-detail-btn" @click="goProjectDetail(item.topicid)">{{item.topicTitle || ('专题id：' + item.topicid)}}</span></span>
                            </el-form-item>
                            <el-form-item label="关联游戏" prop="name" v-else>
                                <el-button size="small" type="warning" @click="checkGame('one', item)">{{item.gameid ? '更换' : '关联'}}游戏</el-button>
                                <span v-if="item.gameid" class="project-content">已关联：<span class="go-detail-btn" @click="goGameDetail(item.gameid)">{{item.appName || item.gameid}}</span></span>
                            </el-form-item>
                            <el-form-item label="视频" prop="url" v-if="detail._contentType === 2">
                                <videoBox :url="item.url" :time="item.duration" :img="item.cover"/>
                                <div class="check-video-btn"><span @click="checkVideo(item)">选择视频</span></div>
                            </el-form-item>
                            <el-form-item label="banner" prop="url" v-else>
                                <uploadCutOwnImg v-model="item.url" :width="1080" :height="528"/>
                                <div class="check-video-btn" style="width:216px;"><span @click="checkBanner(item)">选择banner</span></div>
                            </el-form-item>
                            <el-form-item label="介绍语" prop="name">
                                <el-input v-model="item.content"></el-input>
                            </el-form-item>
                        </template>

                        <template v-if="detail.displayType === 3000">
                            <el-form-item label="关联游戏" prop="name">
                                <el-button size="small" type="warning" @click="checkGame('one', item)">{{item.gameid ? '更换' : '关联'}}游戏</el-button>
                                <span v-if="item.gameid" class="project-content">已关联：<span class="go-detail-btn" @click="goGameDetail(item.gameid)">{{item.appName || item.gameid}}</span></span>
                            </el-form-item>
                            <el-form-item label="关联专题" prop="name" v-if="detail._routerType === 1">
                                <el-button size="small" type="primary" @click="checkProject ('one', item, index)">关联专题</el-button>
                                <span v-if="item.topicid" class="project-content">已关联：<span class="go-detail-btn" @click="goProjectDetail(item.topicid)">{{item.topicTitle || ('专题id：' + item.topicid)}}</span></span>
                            </el-form-item>
                            <el-form-item label="图标" prop="appIcon">
                                <div class="item-icon">
                                    <img :src="item.appIcon" alt="">
                                </div>
                            </el-form-item>
                            <el-form-item label="视频" prop="url" v-if="detail._contentType === 2">
                                <videoBox :url="item.url" :time="item.duration" :img="item.cover"/>
                                <div class="check-video-btn"><span @click="checkVideo(item)">选择视频</span></div>
                            </el-form-item>
                            <el-form-item label="banner" prop="url" v-else>
                                <uploadCutOwnImg v-model="item.url" :width="1080" :height="528"/>
                                <div class="check-video-btn" style="width:216px;"><span @click="checkBanner(item)">选择banner</span></div>
                            </el-form-item>
                            <el-form-item label="标题" prop="name" v-if="detail._leftType === 1">
                                <!-- <el-input v-model="item.appTitle"></el-input> -->
                                <span>{{item.appTitle}}</span>
                            </el-form-item>
                            <el-form-item label="类型" prop="appCategoryName" v-else-if="detail._leftType === 2">
                                <span>{{item.appCategoryName}}</span>
                            </el-form-item>
                            <el-form-item label="评分" prop="name" v-if="detail._leftType === 3 || detail.showButton === 0">
                                <span>{{item.appScore}}</span>
                            </el-form-item>
                        </template>
                    </el-form>
                </template>
            </div>
            <div class="detail-right">
                <div class="right-fiexd">
                    <h3 class="title">样式展示</h3>
                    <div class="right-box">
                        <model1000 v-if="detail.displayType === 1000" :data="detail"/>
                        <model4100 v-else-if="detail.displayType === 4100" :data="detail"/>
                        <model8000 v-else-if="detail.displayType === 8000" :data="detail"/>
                        <model7000 v-else-if="detail.displayType === 7000" :data="detail"/>
                        <model2000 v-else-if="detail.displayType === 2000" :data="detail"/>
                        <model9000 v-else-if="detail.displayType === 9000" :data="detail"/>
                        <model3000 v-else-if="detail.displayType === 3000" :data="detail"/>
                        <model2100 v-else-if="detail.displayType === 2100" :data="detail"/>
                        <model4000 v-else-if="detail.displayType === 4000" :data="detail"/>
                        <model5000 v-else-if="detail.displayType === 5000" :data="detail"/>
                        <model10000 v-else-if="detail.displayType === 10000" :data="detail"/>
                        <model10100 v-else-if="detail.displayType === 10100" :data="detail"/>
                        <model10200 v-else-if="detail.displayType === 10200" :data="detail"/>
                        <model10300 v-else-if="detail.displayType === 10300" :data="detail"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="tools">
            <el-button @click="close" class="btn">返回</el-button>
            <el-button type="success" class="btn save-btn" @click="saveChannel" v-if="detail.channelid">保存</el-button>
            <el-button type="success" class="btn save-btn" @click="creatChannel" v-else>新建</el-button>
        </div>

        <el-dialog
            title="游戏列表"
            class="index-show-list"
            :visible.sync="showGameList"
            width="80%">
            <checkGame v-if="showGameList" :type="gameBoxType" @updateGame="updateGame" @close="showGameList = false" :disabledList="disabledList"/>
        </el-dialog>

        <el-dialog
            title="游戏单列表"
            class="index-show-list"
            :visible.sync="showGameCardList"
            width="80%">
            <checkGameCardList v-if="showGameCardList" :type="gameBoxType" @updateGameCard="updateGameCard" @close="showGameCardList = false" :disabledList="disabledList"/>
        </el-dialog>

        <el-dialog
            title="专题列表"
            class="index-show-list"
            :visible.sync="showProjectList"
            width="80%">
            <project v-if="showProjectList" :type="gameBoxType" @updateProject="updateProject" @close="showProjectList = false" :disabledList="disabledList"/>
        </el-dialog>

        <el-dialog
            title="视频列表"
            class="index-show-list"
            :visible.sync="showVideoList"
            width="900px">
            <videoListBox v-if="showVideoList" :gameName="currentGameName" @check="videoCheck"/>
        </el-dialog>

        <el-dialog
            title="banner列表"
            class="index-show-list"
            :visible.sync="showImgList"
            width="900px">
            <imgListBox v-if="showImgList" :gameName="currentGameName" @check="imgCheck"/>
        </el-dialog>
    </div>
</template>

<script>
import project from '../project/list'
import videoListBox from '../checkVideoList'
import imgListBox from '../checkImgList'
import checkGameCardList from './checkGameCard'
export default {
    data () {
        return {
            detail: {
                channelid: '',
                displayType: 1000,
                elements: [
                    {
                        appDownloadUrl: '',
                        appIcon: '',
                        appName: '',
                        appPackage: '',
                        appRoute: null,
                        appScore: null,
                        appTitle: '',
                        bannerRoute: null,
                        button: null,
                        buttonRoute: null,
                        celeid: null,
                        channelid: null,
                        content: null,
                        cover: null,
                        gameid: null,
                        routeType: 0,
                        sort: null,
                        status: null,
                        topicTitle: null,
                        topicid: null,
                        type: 1
                    }
                ],
                gameList: [],
                endDate: '',
                label: '',
                labelType: null,
                limit: 3,
                pageid: null,
                remark: null,
                showButton: 0,
                showCategory: 0,
                showScore: 1,
                showTitle: 1,
                startDate: '',
                status: 0,
                _routerType: 0,
                _contentType: 1,
                _leftType: 1,
                _timers: []
            },
            channelList: [
                { name: '精选', type: 1000, disabled: false },
                { name: 'banner', type: 2000, disabled: false },
                { name: 'banner+标题', type: 2100, disabled: false },
                { name: 'banner+游戏信息', type: 3000, disabled: false },
                { name: '轮播+标题', type: 4000, disabled: false },
                { name: '轮播+游戏信息', type: 4100, disabled: false },
                { name: '列表', type: 5000, disabled: false },
                { name: 'icon陈列表', type: 7000, disabled: false },
                { name: '游戏单陈列表', type: 10000, disabled: false },
                { name: '游戏单icon轮播', type: 10100, disabled: false },
                { name: '游戏单轮播', type: 10200, disabled: false },
                { name: '游戏单精选', type: 10300, disabled: false }
            ],
            disabledList: [],
            loading: false,
            showGameList: false,
            showProjectList: false,
            showGameCardList: false,
            gameBoxType: 'one',
            rules: {
                // name: [
                //     { required: true, message: '请输入活动名称', trigger: 'blur' }
                // ]
            },
            itemRules: {},
            currentGameName: '', // 默认查询的游戏名称
            showVideoList: false, // 是否展示视频列表
            showImgList: false // 是否展示banner列表
        }
    },
    created () {
        this.channelId = this.$route.query.id
        let channelDetail = window.localStorage.getItem('channelDetail')
        let index = window.localStorage.getItem('channelIndex')
        let newChannel = window.localStorage.getItem('newChannel')
        if (channelDetail) {
            let detail = JSON.parse(channelDetail)
            if (index && index.length && newChannel) {
                newChannel = JSON.parse(newChannel)
                let item
                if (index === 'push') {
                    item = {}
                    item.topicid = newChannel.topicid
                    item.topicTitle = newChannel.title
                    item.content = newChannel.title
                    detail.elements.push(item)
                } else {
                    item = detail.elements[index]
                    item.topicid = newChannel.topicid
                    item.topicTitle = newChannel.title
                    item.content = newChannel.title
                }
                window.localStorage.setItem('newChannel', '')
            }
            this.detail = detail
            return
        }
        if (this.channelId) {
            this.getDetail()
        } else {
            this.dataInit(this.detail)
        }
        if (this.$route.query.type) {
            this.detail.displayType = +this.$route.query.type
        }
    },
    methods: {
        // 获取详情
        async getDetail () {
            if (this.loading) return
            this.loading = true
            let params = {
                channelId: this.channelId
            }
            let res = await this.$http.post('/home/channelDetail', params)
            this.dataInit(res.data)
            this.detail = res.data
            this.loading = false
        },

        // 初始化数据
        dataInit (obj) {
            if (obj.elements.length) {
                obj._routerType = obj.elements[0].routeType
                if (obj.elements[0].type === 1 || obj.elements[0].type === 2) {
                    obj._contentType = obj.elements[0].type
                } else {
                    obj._contentType = 1
                }
            } else {
                obj._contentType = 1
                obj._routerType = 0
            }

            // 左侧类型
            let leftType = 1
            // 显示标题
            if (obj.showTitle === 1) {
                leftType = 1
                // 显示类型
            } else if (obj.showCategory === 1) {
                leftType = 2
            } else if (obj.showScore === 1) {
                // 如果显示安装按钮 左侧就是评分
                if (obj.showButton === 1) {
                    leftType = 3
                } else {
                    leftType = 1
                }
            }
            obj._leftType = leftType

            if (obj.startDate && obj.endDate) {
                obj._timers = [obj.startDate, obj.endDate]
            }
        },

        // 切换类型
        displayTypeChange (val) {
            // 如果是新建频道
            if (!this.detail.channelid) {
                if (val === 4000 || val === 4100 || val === 5000 || val === 7000) {
                    this.detail.elements = []
                } else if (val === 10100 || val === 10300) {
                    this.detail.gameList = [
                        {
                            listId: null,
                            cover: '',
                            title: '',
                            author: {
                                userIcon: '',
                                nickname: ''
                            }
                        }
                    ]
                } else if (val === 10000 || val === 10200) {
                    this.detail.gameList = []
                } else {
                    this.detail.elements = [
                        {
                            appDownloadUrl: '',
                            appIcon: '',
                            appName: '',
                            appPackage: '',
                            appRoute: null,
                            appScore: null,
                            appTitle: '',
                            bannerRoute: null,
                            button: null,
                            buttonRoute: null,
                            celeid: null,
                            channelid: null,
                            content: null,
                            cover: null,
                            gameid: null,
                            routeType: 0,
                            sort: null,
                            status: null,
                            topicTitle: null,
                            topicid: null,
                            type: 1,
                            url: ''
                        }
                    ]
                }
            }
            if (val === 1000 || val === 10200 || val === 10300) {
                this.detail.label = ''
            }
        },

        // 提交数据初始化
        submitInit () {
            let subObj = JSON.parse(JSON.stringify(this.detail))
            subObj.elements.forEach(item => {
                if (subObj._routerType !== 1) {
                    item.routeType = subObj._routerType
                    item.type = subObj._contentType
                } else {
                    item.type = 1
                }
            })
            delete subObj._contentType
            delete subObj._leftType
            delete subObj._routerType
            delete subObj._timers
            return subObj
        },

        // 关闭详情页
        close () {
            this.$router.go(-1)
        },

        async saveChannel () {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.post('/home/updateChannel', this.submitInit())
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '修改成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        async creatChannel () {
            if (this.loading) return
            this.loading = true
            let res = await this.$http.post('/home/addChannel', this.submitInit())
            if (res.code === '0') {
                this.detail.channelid = res.data.channelid
                this.dataInit(res.data)
                this.$message({
                    type: 'success',
                    message: '新建成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 关联游戏按钮
        checkGame (type, item) {
            this.gameBoxType = type
            this.currentItem = item
            if (type === 'all') {
                this.disabledList = []
            } else {
                this.disabledList = [...this.detail.elements]
            }
            this.showGameList = true
        },

        // 关联专题
        checkProject (type, item, index) {
            this.currentIndex = index >= 0 ? index : 'push'
            this.gameBoxType = type
            this.currentItem = item
            if (type === 'all') {
                this.disabledList = []
            } else {
                this.disabledList = [...this.detail.elements]
            }
            this.showProjectList = true
        },

        // 关联游戏单
        checkGameCard (type, item) {
            this.gameBoxType = type
            this.currentItem = item
            if (type === 'all') {
                this.disabledList = []
            } else {
                this.disabledList = [...this.detail.gameList]
            }
            this.showGameCardList = true
        },

        // 选择banner
        checkBanner (item) {
            this.currentItem = item
            this.currentGameName = item.appName
            this.showImgList = true
        },

        refrefs () {
            this.detail = JSON.parse(JSON.stringify(this.detail))
        },

        imgCheck (item) {
            this.currentItem.url = item.url
            this.showImgList = false
            this.refrefs()
        },

        // 选择视频
        checkVideo (item) {
            this.currentItem = item
            this.currentGameName = item.appName
            this.showVideoList = true
        },

        videoCheck (item) {
            this.currentItem.url = item.url
            this.currentItem.cover = item.cover
            this.showVideoList = false
            this.refrefs()
        },

        // 删除某一项
        delCard (item, index) {
            this.detail.elements.splice(index, 1)
        },

        delGameListCard (item, index) {
            this.detail.gameList.splice(index, 1)
        },

        // 添加游戏
        updateGame (list) {
            list.forEach(item => {
                item.cover = null
            })
            if (this.gameBoxType === 'one') {
                let listItem = list[0]
                this.currentItem.appCategory = listItem.appCategory || ''
                this.currentItem.appDownloadUrl = listItem.appDownloadUrl
                this.currentItem.appIcon = listItem.appIcon
                this.currentItem.appName = listItem.appName
                this.currentItem.appPackage = listItem.appPackage
                this.currentItem.appTitle = listItem.appTitle
                this.currentItem.appScore = listItem.appScore
                this.currentItem.gameid = listItem.gameid
                this.currentItem.appCategoryName = listItem.appCategoryName
            } else if (this.gameBoxType === 'some') {
                this.detail.elements.push(...list)
            } else {
                this.detail.elements = list
            }
        },

        // 添加游戏单
        updateGameCard (list) {
            if (this.gameBoxType === 'one') {
                let listItem = list[0]
                this.currentItem.title = listItem.title
                this.currentItem.cover = listItem.cover
                this.currentItem.listId = listItem.listId
            } else if (this.gameBoxType === 'some') {
                this.detail.gameList.push(...list)
            } else {
                this.detail.gameList = list
            }
        },

        // 添加专题
        updateProject (list) {
            if (this.gameBoxType === 'one') {
                let listItem = list[0]
                this.currentItem.topicid = listItem.topicid
                this.currentItem.topicTitle = listItem.title
                this.currentItem.content = listItem.title
            } else if (this.gameBoxType === 'some') {
                for (let i = 0; i < list.length; i++) {
                    let item = {
                        topicTitle: list[i].title,
                        content: list[i].title,
                        topicid: list[i].topicid
                    }
                    this.detail.elements.push(item)
                }
            } else {
                this.detail.elements = []
                for (let i = 0; i < list.length; i++) {
                    let item = {
                        topicTitle: list[i].title,
                        content: list[i].title,
                        topicid: list[i].topicid
                    }
                    this.detail.elements.push(item)
                }
            }
        },

        showButtonChange (val) {
            if (val === 0 && this.detail._leftType === 3) {
                this.detail._leftType = 1
                this.detail.showTitle = 1
            }
            this.detail.showScore = val === 1 ? 0 : 1
        },

        _leftTypeChagne (val) {
            // 如果左侧是标题
            if (val === 1) {
                this.detail.showTitle = 1
                this.detail.showCategory = 0
            // 左侧是类型
            } else if (val === 2) {
                this.detail.showTitle = 0
                this.detail.showCategory = 1
            // 左侧是评分
            } else if (val === 3) {
                this.detail.showTitle = 0
                this.detail.showScore = 1
                this.detail.showCategory = 0
            }
        },

        _routerTypeChagne (val) {
            this.detail.elements.forEach(item => {
                item.routeType = val
            })
            if (val === 1) {
                this.detail._contentType = 1
                this._contentTypeChange(1)
            }
        },

        _contentTypeChange (val) {
            this.detail.elements.forEach(item => {
                item.type = val
            })
        },

        // 查看游戏详情
        goGameDetail (id) {
            const { href } = this.$router.resolve({
                path: '/game/gameDetail',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },

        // 查看专题详情
        goProjectDetail (id) {
            this.$router.push({
                path: '/index/projectDetail',
                query: {
                    id
                }
            })
        }
    },
    watch: {
        detail (val) {
            let displayType = val.displayType
            let arr1 = [7000, 5000, 4100, 4000]
            let arr2 = [1000, 2000, 2100, 3000]
            if (arr1.includes(displayType)) {
                this.channelList.forEach(item => {
                    if (arr1.includes(item.type)) {
                        item.disabled = false
                    } else {
                        item.disabled = true
                    }
                })
            } else if (arr2.includes(displayType)) {
                this.channelList.forEach(item => {
                    if (arr1.includes(item.type) || arr2.includes(item.type)) {
                        item.disabled = false
                    } else {
                        item.disabled = true
                    }
                })
            } else if (displayType === 10100 || displayType === 10300) {
                this.channelList.forEach(item => {
                    if (arr1.includes(item.type) || arr2.includes(item.type)) {
                        item.disabled = true
                    } else {
                        item.disabled = false
                    }
                })
            } else if (displayType === 10000 || displayType === 10200) {
                this.channelList.forEach(item => {
                    if (item.type === 10000 || item.type === 10200) {
                        item.disabled = false
                    } else {
                        item.disabled = true
                    }
                })
            }
        }
    },
    components: {
        project,
        videoListBox,
        imgListBox,
        checkGameCardList
    },

    beforeRouteLeave (to, from, next) {
        // 如果是从这里去新建详情
        if (to.fullPath === '/index/projectDetail?from=channelDetail') {
            window.localStorage.setItem('channelDetail', JSON.stringify(this.detail))
            window.localStorage.setItem('channelIndex', this.currentIndex)
        } else {
            window.localStorage.setItem('channelDetail', '')
            window.localStorage.setItem('channelIndex', '')
        }
        next()
    }
}
</script>

<style lang="scss" scoped>
    .channel-detail {
        display: flex;
        padding: 10px;
        // > div {
        //     flex: 1;
        // }
        .go-detail-btn {
            color: #409EFF;
            cursor: pointer;
            &:hover {
                text-decoration: underline;
            }
        }
        .detail-left, .detail-right {
            .title {
                text-align: center;
            }
        }
        .detail-left {
            flex: 1;
            .left-form {
                margin-top: 10px;
            }
            .drag-items-box {
                margin-bottom: 10px;
                /deep/ .el-card__body {
                    padding: 10px;
                }
            }
            .for-btn-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .right-btn {
                display: flex;
                font-size: 13px;
                margin-top: 10px;
                margin-bottom: 10px;
                > div {
                    color: rgb(97, 195, 102);
                    cursor: pointer;
                    margin-right: 10px;
                    &:hover {
                        opacity: .8;
                        text-decoration: underline;
                    }
                }
                .del-btn {
                    margin: 0;
                    color: red;
                }

            }

            .project-content {
                font-size: 13px;
                margin-left: 5px;
            }
            .for-from-box {
                display: flex;
                padding: 0 10px;
                line-height: 40px;
                word-break: break-all;
                .for-item-title {
                    font-size: 14px;
                    color: #606266;
                    // width: 60px;
                    margin-right: 10px;
                    text-align: right;
                }
                .for-item-content {
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
            }

            .item-icon {
                width: 60px;
                height: 60px;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }

            .check-video-btn {
                width: 160px;
                margin-top: 10px;
                text-align: center;
                font-size: 12px;
                color: #409EFF;
                line-height: 12px;
                cursor: pointer;
                &:hover {
                    opacity: .8;
                    text-decoration: underline;
                }
            }
        }
        .detail-right {
            width: 400px;
            .right-fiexd {
                width: 100%;
                position: sticky;
                top: 10px;
                left: 0;
                z-index: 1;
            }
            .right-box {
                width: 360px;
                margin: 0 auto;
                > div {
                    border: none;
                }
            }
        }
    }
    .tools {
        margin-top: 20px;
        padding-bottom: 20px;
        display: flex;
        justify-content: center;
        .save-btn {
            margin-left: 200px;
        }
        .btn {
            width: 150px;
            padding: 10px;
        }
    }

    .index-show-list {
        /deep/ .el-dialog__body {
            padding: 0 20px 20px;
        }
    }
</style>
